<template>
  <el-main>
    <div class="detail_main">
      <el-row :gutter="26">
        <el-col :span="18">
          <div class="img_div" align="center">
            <img :src="caseDetail.original_img" />
          </div>
        </el-col>
        <el-col :span="6">
          <el-row style="background-color:white">
            <el-col :span="24" class="right_box">
              <p class="title">
                <svg-icon icon-class="relateddetail"></svg-icon>
                <span class="detail_text" style="margin-left:10px"> {{caseDetail.title}}</span>
              </p>
              <div style="margin-top:20px">
                留证时间:
                <p class="detail_text">
                  {{ caseDetail.start_time | parseTime }}
                </p>
                对应网址：
                <p class="detail_text">{{ caseDetail.url }}</p>
                <p class="detail_text"> 创建人：{{ caseDetail.evidence_creater }}</p>
              </div>
            </el-col>
          </el-row>
          <el-row style="margin-top:25px;background-color:white">
            <el-col :span="24" class="right_box">
              <p class="title">
                <svg-icon icon-class="related"></svg-icon>
                <span style="margin-left:10px"> 相关留证</span>
              </p>
              <p v-for="(item, index) in 8" :key="index">
                <el-link
                  :href="caseDetail.url"
                  :underline="false"
                  target="_blank"
                  class="overflow_text"
                  >{{ caseDetail.title }}</el-link
                >
                <span class="a">{{ caseDetail.url }}</span>
              </p>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </el-main>
</template>
<script>
import { formatTime } from "@/utils/index";
import { parseTime } from "@/utils/index";
export default {
  filters: {
    // statusFilter(status) {
    //   const statusMap = {
    //     已存档: "success",
    //     进行中: "info",
    //     已完成: "danger"
    //   };
    //   return statusMap[status];
    // },
    // typeFilter(type) {
    //   return calendarTypeKeyValue[type];
    // },
    formatDate(t) {
      return formatTime(new Date(t).getTime);
    },
   parseTime(val){
     let valtime= val.toString().substr(0,10)
      return  parseTime(valtime)
    },
    formatTime: formatTime
  },
  data() {
    return {
      caseDetail: {
        id: null,
        case_number: null,
        case_name: "",
        case_examiner: [],
        case_creater: "",
        start_time: new Date(),
        label: [],
        case_status: ""
      }
    };
  },
  created() {
    this.getCaseDetail();
  },
  methods: {
    getCaseDetail() {
      // this.caseDetail = JSON.parse(JSON.stringify(this.$route.params.rowkey));
      this.caseDetail=JSON.parse(localStorage.getItem("rowkey"))
      console.log(this.caseDetail);
    }
  }
};
</script>
<style lang="scss" scoped>
.el-main {
  background-color: #fafafa;
}
.title {
  position: relative;
  padding: 16px 0;
  margin: 0;
  font-size: 16px;
  color: #333;
  border-bottom: 1px solid #ebeef5;
  span {
    font-size: 16px;
    color: #333;
    font-family: PingFang SC, Arial, Microsoft YaHei, sans-serif;
  }
}
.img_div {
  
  //  position: relative;;
  //  left: 50%;
  //  transform: translate(-50%);
  // display: flex;
  // justify-content: center;
  // align-items: center;
  height: calc(100vh - 90px)  !important;
  overflow: auto;
}
.a {
  color: #999999;
  display: inline-block;
  width: calc(100% - 30px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.overflow_text {
  color: #333333;
  font-size: 15px;
  display: inline-block;
  width: calc(100% - 30px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: PingFang SC, Arial, Microsoft YaHei, sans-serif;
}
.detail_text {
  color: #333333;
  font-size: 15px;
  margin-top: 15px;
}
.right_box {
  margin-bottom: 20px;
  padding: 0px 20px;
  width: calc(100% - 30px);
  overflow: hidden;
}
</style>
